<template>
  <div class="page">
    <el-row class="list" :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="item in dataList" :key="item.path">
        <div class="item">
          <el-card :body-style="{ padding: '0px' }">
            <div class="cent" ref="cents">
              <component :is="item.component"></component>
            </div>
            <div style="padding: 14px">
              <div class="bottom clearfix">
                <el-link type="primary" @click="gotoPath(item)">{{ item.name }}</el-link>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[8, 12, 16, 24, 48]"
      :size="size"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">
  import { markRaw, ref } from "vue";
  import { useRouter } from "vue-router";
  import { useAllFiles } from "@/store/allFiles";
  import { ComponentSize } from "element-plus";
  const store = useAllFiles();
  const router = useRouter(); // 获取路由器实例
  const gotoPath = (item: any) => {
    router.push({
      name: `vue2-details`,
      query: {
        info: JSON.stringify(item),
      },
    });
  };

  const size = ref<ComponentSize>("default");
  const currentPage = ref(1);
  const pageSize = ref(12);
  const total = ref(0);

  const handleSizeChange = () => {
    getFilesByPage();
  };
  const handleCurrentChange = () => {
    getFilesByPage();
  };

  let list: any[] = [];
  let dataList = ref();

  const getFilesByPage = (type = false) => {
    if (type) {
      currentPage.value = 1;
    }
    let res = store.getFilesByPage({ page: currentPage.value, pageSize: pageSize.value, type: "vue2" });
    list = res.list;
    total.value = res.total;
    getFilesList();
  };

  const getFilesList = async () => {
    dataList.value = await Promise.all(
      list.map(async (e: any) => {
        let module = await e.module();
        e.component = markRaw(module.default);
        return e;
      })
    );
  };

  getFilesByPage();
</script>

<style lang="scss" scoped>
  .page {
    width: 100%;
    height: 100%;
  }
  .list {
    overflow: auto;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;

    .item {
      // width: 20%;
      height: max-content;
      padding: 20px;
      box-sizing: border-box;

      .el-card {
        border-radius: 20px;
      }

      .cent {
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .image {
        width: 100%;
        height: auto;
      }

      .clearfix {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;

        .el-link {
          font-size: 16px;
          font-weight: bold;
        }

        .describe {
          font-size: 12px;
          color: #999;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
</style>
